<template>
  <div class="shop-cart">
    <!-- 导航 -->
    <toast ref="toast"/>
    <nav>
      <div class="text">
        <back />
      </div>
      <div class="title">
        <h2>购物车<span>({{goodList.length}})</span></h2>
      </div>
      <div class="edit"></div>
    </nav>
    <!-- 商品展示 -->
    <div class="goods">
      <div class="good-item" v-for="(item, index) in goodList">
        <div class="user">
          <div>{{ item.user.nickname }}</div>
          <img src="@/assets/img/Mall/shopcart/箭头.svg" alt="" />
        </div>
        <div class="content">
          <div class="choose" @click="handleChoose(item, index)">
            <img
              :class="{ choosed: item.isCheck }"
              src="../../../assets/img/Mall/shopcart/选择.svg"
              alt=""
            />
          </div>
          <img class="img" :src="item.img" alt="" />
          <div class="content-item">
            <p>{{ item.content.goodname }}</p>
            <div class="price">
              <span>￥</span><span class="num">{{ item.content.price }}</span>
            </div>     
          </div>
              <img 
              @click="handleDelete(index)"
              class="delete" 
              src="../../../assets/img/Mall/shopcart/删除.svg" alt="">
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div class="tab-bar">
      <div class="choose-all">
        <div>
          <img
            src="../../../assets/img/Mall/shopcart/选择.svg"
            alt=""
            :class="{ selected: isSelectAll }"
            @click="handleSelectAll"
          />
        </div>
        <div>全选</div>
      </div>

      <div class="count">
        <p>合计:</p>
        <p style="color:orangered">{{total}}</p>
        <div class="total" @click="handleNo">结算{{checked}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Back from "../../../components/Back/Back.vue";
import Toast from '../../../components/Toast/Toast.vue';

export default {
  components: { Back, Toast },
  name: "",
  data() {
    return {};
  },
  computed: {
    goodList() {
      return (
        // JSON.parse(localStorage.getItem("shopCart")) ||
        this.$store.getters.shopCart
      );
    },
    checked(){
      return this.goodList.filter(item=>item.isCheck).length ?
      '('+ this.goodList.filter(item=>item.isCheck).length+')':null
             
    },
    isSelectAll() {
      if(this.goodList.length==0) return false
      return !(this.goodList.filter(item=> !item.isCheck).length)
    },
    total(){
      let total = 0
      this.goodList.forEach(e=>{
        if(e.isCheck){
          total += e.content.price*1
        } 
      })
      return '￥' + total*1
    }
  },
  methods: {
    handleChoose(item, index) {
      this.$store.dispatch('Check',index)
    },
    handleSelectAll(){
      //全选
      if(!this.isSelectAll){
        this.$store.dispatch('SelectAll')
      }else{
        this.$store.dispatch('SelectNone')
      } 
    },
    handleDelete(index){
      this.$store.dispatch('Delete',index)
      let msg = '删除商品成功'
      this.$refs.toast.show(msg,2000)

    },
    handleNo(){
      return alert('开发中')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.shop-cart {
  overflow: hidden;
  /* height: 100vh; */

  padding-bottom: 110px;
  
}
/* 导航 */
nav {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  padding: 10px 0;
  /* margin-bottom: 20px; */
  z-index: 3;
}
.text,.edit {
  width: 50px;
}
.title {
  flex: 1;
}
/* 具体商品 */
.goods {
  overflow: hidden;
  margin-top: 60px;
  padding: 0px 10px;
  padding-bottom: 10px;
  background-color: #eee;
}
.good-item {
  margin-top: 10px;
  padding: 5px 5px;
  height: 150px;
  background-color: white;
  border-radius: 10px;
}
.user {
  margin-left: 40px;
  display: flex;
}
.user div {
  line-height: 32px;
}
.content {
  position: relative;
  display: flex;
}
.choose {
  padding: 0 10px 0 5px;
  line-height: 100px;
}
.choose img {
  border-radius: 50%;
  border: 1px solid #999;
  width: 24px;
  height: 24px;
}
.choosed {
  border: 0;
  background-color: orangered;
}
.img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.content-item {
  margin-left: 10px;
  position: relative;
}
.price {
  color: orangered;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.price .num {
  font-size: 20px;
}
.delete{
  position: absolute;
  bottom: 0;
  right: 10px;
}
/* 底部操作栏 */
.tab-bar {
  padding: 0 10px;
  height: 50px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 49px;
  background-color: #fff;
  border-bottom: 0.5px #eee solid;
}
.choose-all {
  float: left;
  display: flex;
  height: 50px;
  width: 70px;
  line-height: 50px;
}
.choose-all img {
  width: 24px;
  height: 24px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-top: 10px;
  margin-right: 10px;
}
.selected {
  border: 0;
  background-color: orangered;
}
.count {
  float: right;
  display: flex;
  line-height: 50px;
}
.total {
  width: 80px;
  height: 40px;
  background-color: orangered;
  color: white;
  text-align: center;
  border-radius: 20px;
  line-height: 40px;
  margin-top: 5px;
  margin-left: 10px;
}
</style>
